<template>
	<view class="cjxx-content">
		<view class="banjilei tn-margin-bottom-sm">
			<tn-tabs :list="banjilist" :current="currentTab" activeColor="#79CF67" :showBar="false" @change="tabChange"></tn-tabs>
		</view>
		<view class="tn-padding" style="padding-top: 0;">
		<view class="tn-padding-xs tn-margin-bottom-sm" style="background-color: #fff; border-radius: 16rpx;line-height: 50rpx;display: flex;justify-content: space-between;">
			<text>总人数：{{totalRows}}</text>
			<text class="tn-padding-left">未检查人数：{{noCheckCount}}</text>
			<text class="tn-padding-left">晨检异常人数：{{abnormalCount}}</text>
		</view>
		<view class="tn-padding" style="background-color: #fff;border-radius: 16rpx;">
		<view class="search-view tn-padding-bottom">
			<tn-input class="mingc-inp" v-model="youerName" placeholder="请输入姓名搜索" type="text" :height="60" :border="true" />
			<tn-button class="sousuo-btn" size="sm" backgroundColor="#79CF67" fontColor="#fff" @click="submitsousuo">搜索</tn-button>
		</view>
		<view class="tn-flex tn-flex-row-center tn-margin-bottom-sm">
			<view class="justify-content-item">
				<text @click="getNextDate(-1)">前一天</text>
			</view>
			<view class="justify-content-item tn-flex-1 tn-text-center">
				<text class="tn-padding-right-sm" @click="showcalFunction">{{dangqianriqi}}</text><text>{{xingqiji}}</text>
			</view>
			<view class="justify-content-item">
				<text @click="getNextDate(1)">后一天</text>
			</view>
		</view>
		<view class="" v-if="youerList.length">
			<view class="youer-item" v-for="(item, index) in youerList" :key="index">
				<view class="logo-image">
					<!-- <tn-avatar size="lg" src="https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2"></tn-avatar> -->
					
					<tn-avatar v-if="item.gender == 1" size="lg" src="https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2"></tn-avatar>
					<tn-avatar v-else size="lg" src="https://img1.baidu.com/it/u=437472988,595035981&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></tn-avatar>
											  							
				</view>
				<view class="info-item tn-float-left">
					<view class="info-name name-erw"> {{item.childrenName}}</view>
					<view class="info-name">
						<text class="tn-padding-right">{{genders[item.gender]}}</text>
						<text>{{item.age}}</text>
					</view>
				</view>
				<view class="wendu-item tn-float-left">
					<view v-if="item.childrenId">
						<text v-if="item.bodyTemperature">{{item.bodyTemperature}}度</text>
						<text v-else>-</text>
					</view>
					<view v-else>
						<text>-</text>
					</view>
					
				</view>
				<view class="color-m-item tn-float-left" v-if="item.bodyTemperature==0">
					<!-- <view v-if="item.throatType == 0" class="color-m-v bg-zhencheng">
						正常
					</view> -->
					<view v-if="item.throatType == 1" class="color-m-v bg-zhencheng">
						正常
					</view>
					<view v-if="item.throatType == 2" class="color-m-v bg-qingwei">
						轻微
					</view>
					<view v-if="item.throatType == 3" class="color-m-v bg-yanzhong">
						严重
					</view>
				</view>
				<view class="color-m-item tn-float-left" v-else>
					<text class="color-m-text">-</text>
				</view>
				<view class="right-icon-item tn-float-right" @click="goDetailPage(item)">
					详情
				</view>
			</view>
		</view>
			
			<view class="tn-padding-top" v-else>
				 <tn-empty mode="data"></tn-empty>
			</view>
			</view>
		</view>
		
		<tn-calendar
		  v-if="showcalendar"
		  v-model="showcalendar"
		  mode="date"
		  :changeYear="false"
		  @change="onChange"
		  maxDate="2050-12-12"
		></tn-calendar>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	
	export default {
		name: 'youerruyuan',
		
		data(){
			return {
				banjilist: [],
				currentTab: 0,
				banjimingc: '班级名称',
				banjiId: '',
				dangqianriqi: '',
				xingqiji: '',
				youerName: '',
				showcalendar: false,
				youerList: [],
				pageIndex: 1,
				totalPage:0,
				genders:{
					0: '未知',
					1: '男',
					2: '女'
				},
				totalRows: 0,
				abnormalCount: 0,
				noCheckCount: 0,
			}
		},
		onShow() {
			this.getbanjiFenlei()
			this.getxingqi(new Date().getDay())
			this.getDay(new Date())
		},
		mounted() {
			
		},
		onPullDownRefresh() {
			this.pageIndex = 1
			this.getlist();
			console.log('下拉刷新------')
		},
		onReachBottom() {
			this.pageIndex++;
			this.getlist();
			console.log('上啦更多-------')
		},
		methods:{
			submitsousuo(){
				
				this.queryList();
			},
			
			tabChange(tab){
				this.currentTab = tab;
				this.banjiId = this.banjilist[this.currentTab].id;
				this.queryList();
			},
			
			getallbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						this.banjilist = res.data;
						if(this.banjilist.length){
							this.banjiId = this.banjilist[0].id;
							this.queryList();
						}
					}
				})
			},
			getbanjiFenlei(){
				this.request({
					url: '/SysClasses/ListByTeacher',
					method: 'get',
				}).then(res => {
					if(res.code == 200){
						this.banjilist = res.data.map(item => {
							item.label = item.name
							item.value = item.id
							return item
						});
						if(this.banjilist.length){
							
							this.banjimingc = this.banjilist[0].label
							this.banjiId = this.banjilist[0].value
							
							this.queryList();
						}else{
							this.getallbanjiFenlei()
						}
					}
					
				})
			},
			onChange(event){
				
				this.dangqianriqi = event.date
				this.getxingqi(new Date(this.dangqianriqi).getDay())
					this.queryList();
			},
			getDay(dd){
				let y = dd.getFullYear();
			　　let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				this.dangqianriqi = y+'-'+m+'-'+d;
			},	
			showcalFunction(){
				this.showcalendar = true
			},
			getxingqi(week){
				let str = ''
				if (week == 0) {  
				        str = "星期日";  
				} else if (week == 1) {  
				        str = "星期一";  
				} else if (week == 2) {  
				        str = "星期二";  
				} else if (week == 3) {  
				        str = "星期三";  
				} else if (week == 4) {  
				        str = "星期四";  
				} else if (week == 5) {  
				        str = "星期五";  
				} else if (week == 6) {  
				        str = "星期六";  
				}
				this.xingqiji = str;
			},
			getNextDate(day) { 
				let date = this.dangqianriqi;
			　　var dd = new Date(date);
			　　dd.setDate(dd.getDate() + day);
			　　var y = dd.getFullYear();
			　　var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
			　　this.dangqianriqi = y + "-" + m + "-" + d;
			
				this.getxingqi(new Date(this.dangqianriqi).getDay())
				// this.getyiqiandao();
				// this.getweiqiandao();
				
				this.queryList();
			},
			goDetailPage(item){
				uni.navigateTo({
					url: '/pagesA/yuanwuduan/chenjianxinxi?id='+item.id+'&name='+item.childrenName+'&recordTime='+item.recordTime
				})
			},
			queryList(){
				this.pageIndex = 1;
				this.getlist()
			},
			getlist(){
				
					if(this.totalPage > 0 && this.pageIndex > this.totalPage){
						this.$refs.toast.show({
						  title: '',
						  content: '没有更多了',
						  icon: '',
						  image: '',
						  duration: 1000
						})
						return;
					}
					let params = {
						PageNo: this.pageIndex,
						PageSize: 10,
						QueryTime: this.dangqianriqi,
					}
					if(this.banjiId){
						params.ClassId = this.banjiId
					}
					if(this.youerName){
						params.ChildrenName = this.youerName
					}
					this.request({
						url: '/MCheck/GetPage',
						method: 'get',
						params: params,
					}).then(res => {
						
							if(res.code == 200){
								if(this.pageIndex == 1){
									this.youerList = [];
								}
								let rows = res.data.rows[0].checkList;
								this.totalPage = res.data.totalPage;
								this.totalRows = res.data.totalRows
								this.abnormalCount = res.data.rows[0].abnormalCount
								this.noCheckCount = res.data.rows[0].noCheckCount
								rows.forEach(item => {
									// if(item.images && item.images.length){
									// 	item.images.forEach(_img => {
									// 		_img['src'] = this.imageTitle + _img.filedId;
									// 	})
									// }
									this.youerList.push(item);
								})
								uni.stopPullDownRefresh()
							}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cjxx-content{
			min-height: 100vh;
			background-color: rgba(245, 245, 245, 1);
			
			.banjilei{
				background-color: #fff;
			}
	}
	.search-view{
		overflow: hidden;
		line-height: 50rpx;
	}
	.mingc-inp{
		width: calc(100% - 150rpx);
		float: left;
		margin-right: 30rpx;
		background-color: #fff;
	}
	.sousuo-btn{
		width: 100rpx;
	}
	.youer-item{
		height: 100rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}
	.logo-image{
		float: left;
	}
	.bg-zhencheng{
		background-color: #A4E82F;
	}
	.bg-qingwei{
		background-color: #FFCA28;
	}
	.bg-yanzhong{
		background-color: #D9001B;
	}
	.color-m-v{
		width: 130rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
	}
	.info-item{
		width: 35%;
		padding-left: 20rpx;
		color: $uni-color-subtitle;
		.info-name{
			margin-top: 10rpx;
		}
	}
	.wendu-item{
		width: 20%;
		line-height: 100rpx;
		text-align: center;
		color: $uni-color-subtitle;
	}
	.color-m-item{
		width: 20%;
		line-height: 100rpx;
		text-align: center;
		.color-m-v{
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
	.right-icon-item{
		line-height: 100rpx;
		color: #79CF67;
	}
	.name-erw{
		font-weight: 550;
	}
</style>